<template>
  <div class="BlogSecondaryCommentsBox">
    <div class="header">
      <img :src="item.userInfo.headerImg" alt="" />
    </div>
    <div class="content">
      <p>
        <span class="nick">{{ item.userInfo.nick }}</span
        >&nbsp;
        <span class="lz" v-show="userID == item.userId">Me</span>
        <!-- <span class="lz" v-show="userID == item.userId">楼主</span> -->
        :
        <span class="text"> {{ item.messageContent }} </span>
      </p>
      <div class="bottom">
        <div class="timer">{{ item.createTime }}</div>
        <div class="operation">
          <span class="iconfont icon-yichang_weixian_jubao"></span>
          <!-- <span class="iconfont icon-31dianzan">
            &nbsp;{{ item.like }} &nbsp;</span
          > -->
          <span class="iconfont icon-31pinglun" @click="SecondaryCommentsInput">
            &nbsp;{{ replyNumber }}&nbsp;</span
          >
        </div>
      </div>
      <div class="SecondaryCommentsInput" v-show="SecondaryCommentsFlagRef">
        <input
          type="text"
          :class="{
            dark_input: themeRef.state.themeState == 'drak',
            light_input: themeRef.state.themeState == 'light',
          }"
          :placeholder="`${item.userInfo.nick}的回复`"
          v-model="inputValueRef"
        />
        <span class="bq iconfont icon-emoji" @click="emojiShowOrHide"></span>
        <button class="sub" @click="throttleFn(uploadData)">提交</button>
        <div
          @mouseleave="emojiShowOrHide"
          v-show="emojiShowOrHideRef"
          class="emojiBox"
          :class="{
            dark_input: themeRef.state.themeState == 'drak',
            light_input: themeRef.state.themeState == 'light',
          }"
        >
          <span v-for="Item in emojiDataRef" :key="Item.id" @click="copyEmoji">
            {{ Item.text }}
          </span>
        </div>
      </div>
      <div class="SecondaryComments" v-if="replyNumber > 0">
        <div
          v-for="item in renderSecondaryCommentsRef"
          :key="item.id"
          class="SecondaryCommentsBox"
        >
          <div class="left">
            <span class="nick">{{ item.userInfo.nick }}</span
            >&nbsp;回复 : &nbsp;
            <span class="content"> {{ item.replyContent }}</span>
          </div>
          <div class="right">
            <span class="iconfont icon-yichang_weixian_jubao jb"></span>
            <span class="time">{{ item.createTime }}</span>
          </div>
        </div>
        <div
          class="reply"
          @click="getSecondaryComments"
          v-if="renderSecondaryCommentsRef.length < replyNumber"
        >
          共有{{ replyNumber }}条回复,点击加载更多
        </div>
        <div v-else class="null">抱歉没有更多了呢~~</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import InputComm from "../InputCommComp/InputComm.vue";
import { useStore } from "vuex";
import { emoji as emojiData } from "@/data/emoji";
import { ElMessage } from "element-plus";
import { throttle } from "../../utils/Tools";
import ins from "../../utils/Axios";
@Options({
  components: { InputComm },
  props: { item: Object },
  watch: {},
  computed: {},
  mounted() {
    console.log(this.item);
    this.messageId = this.item.id;
    this.blogId = this.item.blogId;
    this.replyNumber = this.item.replyNumber;
    this.userID = localStorage.getItem("userID");
    this.blogUserId = this.item.userId;
  },
})
export default class BlogSecondaryCommentsBox extends Vue {
  themeRef: any = useStore();
  // 当前评论的归属用户
  blogUserId: string = "";
  // 二级回复的渲染数组
  renderArrRef: any = [];
  // 二级回复栏状态
  SecondaryCommentsFlagRef: boolean = false;
  // 当前登录的用户
  userID: string = "";
  // 当前的博客ID
  blogId: string = "";
  // 当前liuyanID
  messageId: number = 0;
  // 当前的回复数量
  replyNumber: number = 0;
  // 表情状态
  emojiDataRef: Array<Object> = emojiData;
  // 表情状态
  emojiShowOrHideRef: boolean = false;
  // 输入框双向数据绑定
  inputValueRef: string = "";
  // 获取当前是第几页数据
  SecondaryCommentsPageRef: number = 0;
  // 获取当数据每页多少个
  SecondaryCommentsPageNumberRef: number = 5;
  // 共有多少条回复
  SecondaryCommentsCountRef: number = 0;
  // 渲染二级回复的内容
  renderSecondaryCommentsRef: any = [];
  // 获取当前的XIB
  getSecondaryComments() {
    this.SecondaryCommentsPageRef++;
    ins
      .post("/message/QuerySecondaryMessage", {
        messageId: this.messageId,
        getPage: this.SecondaryCommentsPageRef,
        getNumber: this.SecondaryCommentsPageNumberRef,
      })
      .then((res: any) => {
        const { data } = res;
        if (this.renderSecondaryCommentsRef.length > 0) {
          data.data.forEach((element: any) => {
            this.renderSecondaryCommentsRef.push(element);
          });
        } else {
          this.SecondaryCommentsCountRef = data.count;
          this.renderSecondaryCommentsRef = data.data;
        }
      })
      .catch((err: any) => {
        ElMessage.error("网络出现异常，请刷新后重试！");
      });
  }
  // emoji表情显示与隐藏
  emojiShowOrHide(e: any) {
    this.emojiShowOrHideRef = !this.emojiShowOrHideRef;
  }
  // 点击标签表情
  copyEmoji(e: any) {
    this.inputValueRef += e.target.innerText;
  }
  // SecondaryCommentsInput的显示与隐藏
  SecondaryCommentsInput() {
    this.SecondaryCommentsFlagRef = !this.SecondaryCommentsFlagRef;
  }
  //提交数据
  uploadData() {
    if (this.inputValueRef.length == 0) {
      ElMessage.error("不允许为空！");
      return;
    } else if (!localStorage.getItem("token")) {
      ElMessage.error("请登陆后进行操作！");
      return;
    } else {
      ins
        .post("/message/setCreateSecondaryMessage", {
          messageId: this.messageId,
          replyContent: this.inputValueRef,
        })
        .then((res: any) => {
          if (res.data.flag) {
            this.inputValueRef = "";
            this.replyNumber++;
            this.renderSecondaryCommentsRef.push();
          } else {
            ElMessage.error("网络超时，请刷新后重试！");
          }
        })
        .catch((err: any) => {
          ElMessage.error("网络超时，请刷新后重试！");
        });
    }
  }
  //节流
  throttleFn(cb: any) {
    throttle(cb, arguments);
  }
}
</script>
<style lang="less" scoped>
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>